<template>
	<view class="appTitle">





		<view class="appTitle_left">
			<view class="appTitle_left_box" @click="tobackFun">
				<view class="appTitle_left_box_left">
					<uni-icons type="home" v-if="types" color="#333" size="16"></uni-icons>
					<uni-icons type="left" v-else color="#333" size="16"></uni-icons>
				</view>
				返回
				<!-- <view class="appTitle_left_box_right">
					<uni-icons type="bars" color="#333" size="16" @click="toggle('top')"></uni-icons>
				</view> -->
			</view>
		</view>
		<view class="appTitle_center">
			{{title}}
		</view>
		<view class="appTitle_right">
			<slot name="titleRight"></slot>
		</view>





		<uni-popup ref="popup" backgroundColor='background-color: raba(0,0,0,.0)' background-color="#fff"
			@change="change">
			<view class="popup">
				<h4>快捷菜单</h4>
				<view class="popup_box">
					<view class="popup_box_item" @click="toTabFun('/pages/home/home')">
						<view class="popup_box_item_image">
							<image src="../static/components/home (1).png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							首页
						</view>
					</view>
					<view class="popup_box_item">
						<view class="popup_box_item_image">
							<image src="../static/components/search.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							搜索
						</view>
					</view>
					<view class="popup_box_item" @click="toTabFun('/pages/member/member')">
						<view class="popup_box_item_image">
							<image src="../static/components/user.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							个人中心
						</view>
					</view>
					<view class="popup_box_item" @click="toTabFun('/pages/car/car')">
						<view class="popup_box_item_image">
							<image src="../static/components/cart.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							购物车
						</view>
					</view>
					<view class="popup_box_item">
						<view class="popup_box_item_image">
							<image src="../static/components/browse.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							浏览记录
						</view>
					</view>
					<view class="popup_box_item">
						<view class="popup_box_item_image">
							<image src="../static/components/collect.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							我的收藏
						</view>
					</view>
					<view class="popup_box_item">
						<view class="popup_box_item_image">
							<image src="../static/components/feedback.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							意见反馈
						</view>
					</view>
					<view class="popup_box_item">
						<view class="popup_box_item_image">
							<image src="../static/components/service.png" mode="widthFix">
							</image>
						</view>
						<view class="popup_box_item_text">
							客服
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "appTitle",
		props: {
			title: {
				type: String,
				default: ''
			},
			types: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				type: ''
			};
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			change(e) {
				console.log(e);
			},
			tobackFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			toTabFun(url) {
				this.$refs.popup.close();
				uni.reLaunch({
					url
				})
			},
			toFun(url) {
				this.$refs.popup.close();
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>


<style lang="scss">
	.appTitle {
		width: 100%;
		min-height: 88rpx !important;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		margin-top: var(--status-bar-height);
		background-color: #FFFFFF;
		border-bottom: 2rpx solid #f6f6f6;

		.appTitle_left {
			flex: 1;
			height: 100%;
			display: flex;
			align-items: center;

			.appTitle_left_box {
				width: 100rpx;
				height: 56rpx;
				background: #ffffff;
				box-shadow: 0 0 0.125rem rgba(51, 51, 51, .08), 0 0.125rem 0.1875rem 0.0625rem rgba(102, 102, 102, .12);
				border-radius: 0.9375rem;
				width: 4.1875rem;
				height: 1.75rem;
				// margin-left: 0.25rem;
				display: flex;
				justify-content: space-around;
				align-items: center;
				position: relative;
				font-size: 26rpx;

				// .appTitle_left_box_left::after {
				// 	width: 1rpx;
				// 	height: 20rpx;
				// 	background-color: rgba(51, 51, 51, .3);
				// 	content: '';
				// 	position: absolute;
				// 	top: 0;
				// 	left: 0;
				// 	right: 0;
				// 	bottom: 0;
				// 	margin: auto;
				// }
			}


		}

		.appTitle_center {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 34rpx;
		}

		.appTitle_right {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;
		}

		.popup {
			width: 100%;
			height: 490rpx;
			border-bottom-left-radius: 50rpx;
			border-bottom-right-radius: 50rpx;
			overflow: hidden;
			background-color: #F0F0F0;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			padding-top: calc(var(--status-bar-height) + 30rpx);

			h4 {
				margin-bottom: 40rpx;
			}

			.popup_box {
				width: 100%;
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				align-content: space-between;

				.popup_box_item {
					width: 25%;
					height: 156rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.popup_box_item_image {
						width: 104rpx;
						height: 104rpx;
						background-color: #FFFFFF;
						border-radius: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.popup_box_item_text {
						width: 100%;
						margin-top: 10rpx;
						text-align: center;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>